let $ = (sel) => document.querySelector(sel),
    wrap = $('.box'),
    rubBox = $('.rubbishBox'),
    countEle = $('.count'),
    count = 0,
    boxs = [...document.querySelectorAll('p')];
    console.log(wrap);

boxs.forEach((box,idx) => {
    box.addEventListener('mousedown',(e) => {
        let flag = false,
            disX = e.offsetX,
            disY = e.offsetY,
            posX = box.offsetLeft,
            posY = box.offsetTop;
        // 记录盒子的位置

        document.addEventListener('mousemove',(ev) => {
            if(flag) return;
            let l = ev.clientX - wrap.offsetLeft - disX;
            let t = ev.clientY - wrap.offsetTop - disY;
            box.style.left = l + 'px';
            box.style.top = t + 'px';
        })
        document.addEventListener('mouseup',() => {
            flag = true;
            let info = rubBox.getBoundingClientRect(),
                x = box.offsetLeft + wrap.offsetLeft,
                y = box.offsetTop + wrap.offsetTop;
                console.log('lll' + info.left)
                console.log('rrr' + info.right);
                console.log('left' + x);
                console.log('top' + y);
            // 如果box在rubBox的范围里
            if(x >= info.left && x <= info.right && y >= info.top && y <= info.bottom){
                box.remove();
                countEle.innerHTML = countEle.innerHTML * 1 + 1;
            }else{
                box.style.left = posX + 'px';
                box.style.top = posY + 'px';
            }
        })
    })
})